<template>
  <h2>customRef（自定义ref）</h2>
  <h4>防抖案例</h4>
  <hr />
  <input type="text" v-model="keyWord" />
  <h3>{{ keyWord }}</h3>
</template>

<script>
//引入customRef
import { ref, customRef } from "vue";
export default {
  name: "App",
  setup(props) {
    //
    /* 
    自定义一个ref：myRef
    参数：value 初始值 delay 延迟
    */
    function myRef(value,delay) {
      let timer; //创建一个定时器
      return customRef((track, trigger) => {
        // customRef规定：内部回调必须返回一个带有get和set的对象
        return {
          get() {
            console.log("get调用");
            track(); //3. 调用track()通知Vue追踪数据变化
            return value;
          },
          set(newValue) {
            console.log("set调用", newValue);
            clearTimeout(timer)
            timer = setTimeout(() => {
              value = newValue; //1. 修改数据
              trigger(); //2. 调用trigger通知Vue去重新解析模版
            }, delay);
          },
        };
      });
    }

    // let keyWord = ref('hello Vue3.x') //使用Vue3提供的ref
    let keyWord = myRef("hello Vue3.x",500); //使用customRef（自定义ref）

    return {
      keyWord,
    };
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>
